<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>仿知乎</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--头部-->
    <header class="hd">
        <!-- 中间的版心 -->
        <div class="center">
            <!-- 左侧 -->
            <div class="hd-left">
                <img class="icon-logo" src="https://temp.im/100x34" alt="">

                <!-- 导航列表 -->
                <nav class="hd-nav">
                    <a href="#" class="hd-nav-current">首页</a>
                    <a href="#">话题</a>
                    <a href="#">讨论</a>
                </nav>

                <!-- 搜索 -->
                <input type="text" class="hd-search" placeholder="XXX是一种怎么样的体验？" />

                <button class="hd-search-btn">提问</button>
            </div>

            <!-- 右侧 -->
            <div class="hd-right">
                <a href="#">
                    <i class="itlike-bell"></i>
                </a>
                <a href="#">
                    <i class="itlike-bubbles2"></i>
                </a>
                <a href="#">
                    <img src="https://temp.im/30x30" alt="">
                </a>
            </div>

        </div>
    </header>
    <!--主体内容-->

    <main class="main center">
        <!-- 主体左侧 -->
        <div class="main-left">
            <div class="main-left-card">
                <ul>
                    <li class="main-left-card-current">
                        <a href="#">推荐</a>
                    </li>
                    <li>
                        <a href="#">关注</a>
                    </li>
                    <li>
                        <a href="#">热榜</a>
                    </li>
                </ul>
            </div>


            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>


            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>




            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>



            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>



            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>


            <div class="main-item">
                <p class="main-item-tatil">什么是静态网页？</p>
                <div class="main-item-con">
                    <div class="main-item-con-l">
                        <img src="https://picsum.photos/190/106" alt="">
                    </div>
                    <div class="main-item-con-r">
                        您好，在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”， 静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、

                    </div>
                </div>
                <div class="main-item-foot">
                    <div class="one">
                        <a href="#">
                            <i class="itlike-diamonds"></i>赞同 1.3k</a>

                    </div>
                    <a href="#">
                        <i class="itlike-bubble"></i>335 条评论</a>
                    <a href="#">
                        <i class="itlike-compass"></i>分享</a>
                    <a href="#">
                        <i class="itlike-star-full"></i>收藏</a>
                    <a href="#">
                        <i class="itlike-heart"></i>感谢</a>
                    <a href="#">···</a>
                </div>
            </div>

        </div>

        <!-- 主体右侧 -->
        <div class="main-right">
                <div class="r-one">
                    <div class="r-one-item">
                        <i class="itlike-book"></i>
                        <span>写回答</span>
                    </div>
                    <div class="r-one-item">
                        <i class="itlike-file-text2"></i>
                        <span>写文章</span>
                    </div>
                    <div class="r-one-item">
                        <i class="itlike-pencil"></i>
                        <span>写想法</span>
                    </div>
                </div>
                <div class="r-two">
                    <div class="r-two-item">
                        <i class="itlike-power orangered"></i>
                        <span>Live</span>
                    </div>
                    <div class="r-two-item">
                        <i class="itlike-book green"></i>
                        <span>书店</span>
                    </div>
                    <div class="r-two-item">
                        <i class="itlike-firefox blue"></i>
                        <span>圆桌</span>
                    </div>
                    <div class="r-two-item">
                        <i class="itlike-pencil red"></i>
                        <span>专栏</span>
                    </div>
                    <div class="r-two-item">
                        <i class="itlike-coin-yen purple"></i>
                        <span>付费咨询</span>
                    </div>
                </div>
                <div class="r-three">
                    <a href="#">
                        <img src="https://temp.im/540x450" alt="">
                    </a>
                    <a class="ad" href="">广告</a>
                    <span class="close">×</span>
                </div>
                <div class="r-three">
                    <a href="#">
                       <img src="https://temp.im/540x450" alt="">
                    </a>
                    <a class="ad" href="">广告</a>
                    <span class="close">×</span>
                </div>
            </div>
    </main>





</body>

</html>